/**
 * @function 基础图片组件
 * @param { src, round, 事件 }
 * @des 基于syled-components 做排版
 */
import React from 'react';
import styled from 'styled-components'
import PropTypes from 'prop-types';
// js
const ImageView = (props) => {
  const { src, round, imgClick } = props;
  return <ImageWrapper round={round} onClick={imgClick}>
    <img src={src} alt="" />
  </ImageWrapper>
}

ImageView.propTypes = {
  src: PropTypes.string,
  round: PropTypes.bool,
  imgClick: PropTypes.func
};
// 指定 props 的默认值：
ImageView.defaultProps = {
  src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1673371679,759154461&fm=26&gp=0.jpg'
};

export default ImageView;

// css
const ImageWrapper = styled.div`
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    border-radius: ${props => props.round ? '50%' : ''}
  }
`